<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            position: relative;
            height: 200px;
            margin: 10px;
        }

        form>div {
            width: 300px;
            height: 200px;
            border: 1px dashed grey;
            position: absolute;
            left: 600px;
            top: 0;
        }
    </style>
</head>

<body>
<div >
    <hr>CGCS2000转上海城市坐标</hr>
    <div>
        <input type="text" name="x" id="x1">
        <input type="text" name="y" id="y1">
        <button id="submit1">提交</button>
    </div>
    <div>
        <h6>结果展示:</h6>
        <div id="content1"></div>
    </div>
</div>
<div >
    <hr>上海城市坐标转CGCS2000</hr>
    <div>
        <input type="text" name="x" id="x2">
        <input type="text" name="y" id="y2">
        <button id="submit2">提交</button>
    </div>
    <div>
        <h6>结果展示:</h6>
        <div id="content2"></div>
    </div>
</div>
<div>
    <hr>地址与地名转换</hr>
    <div>
        <input type="text" id="x3">
        <input type="text" id="y3">
        <button id="submit3">提交</button>
    </div>
    <div>
        <h6>结果展示:</h6>
        <div id="content3"></div>
    </div>
</div>
<div >
    <hr>批量进行坐标转换  2000转上海</hr>
    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button id="submit4">提交</button>
    </div>
    <div>
        <h6>结果展示:</h6>
        <div id="content4"></div>
    </div>
</div>
<script src=" ../static/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#submit1').click(function () {
            $.ajax({
                url: 'http://localhost:8888/test/public/cgcs2city?lon='+$("#x1").val()+'&lat='+$("#y1").val(),
                type: 'POST',
                async: false,
                contentType: "application/json",
                data:{
                    lon:$("#x1").val(),
                    lat:$("#y1").val()
                },
                success: function (res) {
                    $('#content1').text(res)
                },
                error: function (err) {

                }
            })
        })
        $('#submit2').click(function () {
            $.ajax({
                url: 'http://localhost:8888/test/public/cgcs2citysh?x='+$("#x2").val()+'&y='+$("#y2").val(),
                type: 'POST',
                async: false,
                success: function (res) {
                    $('#content2').text(res)
                },
                error: function (err) {

                }
            })
        })
        $('#submit3').click(function () {
            $.ajax({
                url: 'http://localhost:8888/test/public/addrOrAddrName?addrName='+$("#x3").val()+'&num='+$("#y3").val(),
                type: 'POST',
                async: false,
                success: function (res) {
                    $('#content3').text(res)
                },
                error: function (err) {

                }
            })
        })
        $('#submit4').click(function () {
            $.ajax({
                url: 'http://localhost:8888/test/public/cgcs2cityArray',
                type: 'POST',
                async: false,
                success: function (res) {
                    $('#content4').text('haha')
                },
                error: function (err) {

                }
            })
        })
    })

</script>
</body>

</html>